<template>
    <div class="box">
        <div class="header-box">
            <img class="logo" src="../assets/login/image/logo.png" alt="">


        </div>


        <div class="center-box">
            <div class="body-box">
                <div class="img-box">
                    <img class="login-img" src="../assets/login/image/loginImg.jpg" alt="">
                </div>


                <div class="from-box">
                    <div class="login-or">
                        <span>账号登录</span>
                        <img class="login-or-is" src="../images/login1.png" alt="">
                    </div>

                    <div class="login-from">
                        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
                            label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>

                            <!-- 用户名 -->
                            <div class="row">
                                <div class="tubiao">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </div>

                                <div class="user-name">
                                    <el-form-item prop="username">
                                        <el-input class="input-element" clearable v-model="ruleForm.username" />
                                    </el-form-item>
                                </div>
                            </div>
                            <!-- 密码 -->
                            <div class="row">
                                <div class="tubiao">
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </div>

                                <div class="user-name">
                                    <el-form-item prop="pwd">
                                        <el-input class="input-element" clearable show-password type="password" v-model="ruleForm.pwd" />
                                    </el-form-item>
                                </div>
                            </div>
                            <!-- 验证码 -->
                            <div class="row">
                                <div class="tubiao">
                                    <el-icon>
                                        <CircleCheck />
                                    </el-icon>
                                </div>

                                <div class="user-name">
                                    <el-form-item prop="verifyCode">
                                        <el-input class="input-element" clearable v-model="ruleForm.verifyCode" />
                                    </el-form-item>
                                </div>

                                <div class="code-img">
                                    <img class="imageCode" @click="getCaptcha" :src="captcha.imageCode" alt="">
                                </div>

                            </div>

                            <div class="checked-element">
                                <el-checkbox class="checkedinput" v-model="checked1" label="记住我" size="large" />
                            </div>

                            <div class="button-box">
                                <el-button class="btn-element" @click="submitForm(ruleFormRef)" type="success">登
                                    录</el-button>
                            </div>
                        </el-form>


                        <div class="it-login">
                            <div class="it-login-text">
                                <el-divider class="divider-element" />
                                <span>其他登录方式</span>
                                <el-divider class="divider-element" />
                            </div>

                            <div class="it-login-img">
                                <img src="../assets/it-login.png" alt="">
                            </div>


                        </div>

                    </div>

                </div>

            </div>
        </div>



        <div class="foot-box">
            <p class="text">Copyright © 2021 - 2024 youlai.tech All Rights Reserved. 皖ICP备20006496号-2</p>
        </div>
    </div>




</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { authLogin, authCode, authPublicKey, getCaptcha } from '../apis/login'
import { sm2 } from 'sm-crypto'
import {setToken} from '../utils/token'

// 路由导入
import {useRouter} from 'vue-router'
import type { Captcha } from '@/model/loginModel';
import { doEncrypt } from '@/utils/cryptoUtil';
import { useAuthSotre } from '@/sotre/authStore';
const router = useRouter()
const store= useAuthSotre();
// 表单接口
interface RuleForm {
    username: string
    pwd: string
    verifyCode: string
    verifyCodeId: string
}
// 存储表单
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    username: '',
    pwd: '',
    verifyCode: '',
    verifyCodeId: ''
})
// 表单提示
const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        // { min: 3, max: 5, message: '用户名长度为2-30位', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        // { min: 2, max: 30, message: '用户名长度为2-30位', trigger: 'blur' },
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        // { min: 2, max: 30, message: '用户名长度为2-30位', trigger: 'blur' },
    ],
})


const checked1 = ref(true)

// // 验证码图片存储值
// const src = ref('')
// // 获取验证码
// const getCaptcha = async () => {
//     let res = await authCode()
//     src.value = res.data.imageCode
//     ruleForm.verifyCodeId = res.data.id
//     // console.log(res)
//     // console.log('图片验证码', src.value);
// }
// getCaptcha()


//获取图形验证码

const captcha=ref<Captcha>({
  id:"",
  imageCode:""
});
const getCaptchaData=async ()=>{
   const res=await  getCaptcha().catch(()=>undefined);
   if(res){
    captcha.value=res;
    ruleForm.verifyCodeId=res.id;
   }
}
getCaptchaData();

/**
 * 提交表单函数
 * @param {FormInstance | undefined} formEl - 表单实例，用于执行表单验证
 */
const submitForm=(formEl: FormInstance | undefined)=>{
    // 检查表单实例是否存在，如果不存在则直接返回
    if (!formEl) return
    // 调用表单实例的验证方法，验证表单数据是否有效
    formEl.validate(async (valid) => {
        // 如果表单数据验证通过
        if(valid){
            console.log("验证通过");
            // 加密密码
            let pwd=await  doEncrypt(ruleForm.pwd);
            // 调用登录API进行登录操作
            const res=await store.loginApi({...ruleForm,pwd});
            //   跳转成功路由
            if(res){
                router.push("/")
            }
            console.log("登录后",res);
        }
    })
}


// // 表单提交按钮方法
// const submitForm = async (formEl: FormInstance | undefined) => {
//     // console.log('ruleFrom', ruleForm);
//     if (!formEl) return
//     await formEl.validate(async (valid, fields) => {
//         if (valid) {
//             try {

//                 // 加密
//                 // 获取公钥
//                 let res = await authPublicKey()
//                 console.log('获取公钥', res);
//                 const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
//                 ruleForm.pwd = sm2.doEncrypt(ruleForm.pwd, res.data, cipherMode) // 加密结果

//                 // 登录接口
//                 let userlogin = await authLogin(ruleForm)
//                 console.log('登录成功', userlogin);
//                 setToken(userlogin.data.token)

//                 // message.success('登录成功')
//                 // 成功提示
//                 ElMessage.success('Hi~~~' + ruleForm.username + '欢迎回来')
//                 // 路由跳转
//                 router.push('/home')
//             } catch (error) {
//                 console.log('error', error);
//             }
//             // console.log('res',res)
//         } else {
//             // 错误提示
//             console.log('error submit!', fields)
//         }
//     })
// }


</script>

<style scoped lang='less'>
@import url('../assets/login/login.less');

</style>